<template>
  <div class="section-header">
    <h3>Real Review</h3>
    <p class="mute">
      Here's what our students have to say about their experience with
      Designership.
    </p>
  </div>
  <div class="studentreview__wrapper">
    <SwiperSlide
      class="slider__pagination-1"
      :dataList="reviews"
      :breakpoints="breakpoints"
      :loop="loop"
      :autoplay="autoplay"
      :speed="speed"
      :grabCursor="grabCursor"
    >
      <template #content="{ item }">
        <div class="studentreview__item">
          <div class="studentreview__item-inner">
            <div class="studentreview__thumb">
              <img
                class="studentreview__thumb-image"
                :src="item.thumbnail"
                alt="review Images"
              />
              <div class="studentreview__thumb-top">
                <img
                  src="/images/testimonial/home1/review/Logo.png"
                  alt="icon"
                />
                <p>{{ item.videoTitle }}</p>
              </div>
              <div class="studentreview__thumb-playbtn">
                <VideoModal :link="'https://www.youtube.com/embed/Pf03RTjeISE'">
                  <template v-slot:button>
                    <a href="javascript:void(0);"
                      ><img
                        src="/images/testimonial/home1/review/Youtube.png"
                        alt="ply-btn"
                    /></a>
                  </template>
                </VideoModal>
              </div>
            </div>

            <div class="studentreview__item-author">
              <h6>{{ item.name }}</h6>
              <span>{{ item.role }}</span>
            </div>
          </div>
        </div>
      </template>
      <template v-slot:pagination>
        <div class="slider__pagination-1 mt-5 py-2 text-center"></div>
      </template>
    </SwiperSlide>
  </div>
</template>

<script>
import SwiperSlide from "@/components/base/slots/SwiperSlide.vue";
import VideoModal from "@/components/base/modals/VideoModal.vue";
export default {
  components: { SwiperSlide, VideoModal },
  props: {
    reviews: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      spaceBetween: 24,
      grabCursor: true,
      loop: true,
      breakpoints: {
        576: {
          slidesPerView: 2,
        },
        768: {
          slidesPerView: 2,
        },
        992: {
          slidesPerView: 3,
          spaceBetween: 15,
        },
        1200: {
          slidesPerView: 4,
          spaceBetween: 25,
        },
      },
      autoplay: {
        delay: 1,
        disableOnInteraction: true,
      },
      speed: 5000,
    };
  },
};
</script>

<style></style>